<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <script src="./bootstrap/js/jquery.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: red;
        }

        nav p {
            margin: 5px 10px;
        }

        nav p:nth-of-type(2) {
            color: deeppink;
            margin-top: 10px;
        }

        .row {
            margin-top: 5px;
        }

        .row,
        .col-xs-3 {
            background-color: white !important;
            box-shadow: none !important;
        }

        .row img {
            width: 100px;
        }

        .container-fluid p {
            color: #B59871;
            font-size: 18px;
        }

        .all {
            width: 100%;
        }

        .footer {
            width: 100%;
            height: 130px;
            background-image: url('http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/7cyd.png');
            /* background-repeat: no-repeat; */
            overflow: hidden;
        }
        .container-fluid:nth-last-of-type(1){
            color: white;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p class="pull-left" href="#"><img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/logo_95op_ji4i.png"
                        alt="">
                    <p>
                        <span>XX甜品</span>
                        <br>
                        <span>SWEET</span>
                    </p>
                </p>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">美食甜品</a></li>
                    <li><a href="#">新闻动态</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 轮播 -->
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
          
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/banner_3p2r.jpg" alt="...">
              </div>
              <div class="item">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/banner_3p2r.jpg" alt="...">
                
              </div>
              <div class="item">
                    <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/banner_3p2r.jpg" alt="...">
                    
                  </div>
            </div>
          
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
    <!--  -->
    <div class="container">
        <!-- <h1>Hello, world!</h1> -->
        <div class="row">
            <div class="col-xs-3 text-center" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/833b.png" alt="">
                <p>马卡龙</p>

            </div>
            <div class="col-xs-3 text-center" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/67d4.png" alt="">
                <p>芝士蛋糕</p>

            </div>
            <div class="col-xs-3 text-center" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/d1hv.png" alt="">
                <p>提拉米苏</p>

            </div>
            <div class="col-xs-3 text-center" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/ycn0.png" alt="">
                <p>西式甜点</p>
            </div>

        </div>
    </div>
    <div class="container-fluid">
        <h4 class="text-center"><span><img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/oj7x_meitu_1_dugf.png"
                    alt=""></span>&#x3000;关于我们&#x3000;
            <span><img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/oj7x.png" alt=""></span></h4>
        <p>
            1993年8月8日，注定是对中国糖果行业有着深远影响的一天，某某食品有限公司怀着与生俱来的激情与活力在海峡西岸经济区——福建晋江诞生。 经 过十年的沉淀，某某在2003年完成了第一次华丽转身，某某V9的横空出世，为中国开创了维生素糖果的品类。随后，益牙木糖醇在口香糖领域取得巨大成功，
            打破了外资品牌垄断胶母糖果市场的局面。某某VQ、浓点、美嚼等众多分品牌也迅速获得市场认可，形成了中国糖果行业第一流的品牌方阵。也为某某赢得了“中 国****”、“中国名牌”、“国家免检产品”等代表中国产品和品牌的至高荣誉。
        </p>
    </div>
    <div class="container-fluid">
        <h4 class="text-center"><span><img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/oj7x_meitu_1_dugf.png"
                    alt=""></span>&#x3000;美食甜品&#x3000;
            <span><img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/oj7x.png" alt=""></span></h4>
        <div class="container">
            <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/ba56.jpg" alt="" class="all">
        </div>
    </div>
    <div class="container-fluid">
    <div class="footer">
        <div class="container">
            <hr>
            <p>版权所有 © 您的网站名称 未经许可 严禁复制 建议使用1024X768分辨率浏览本站 Copyright © 2009-2011,www.xxxxxx.com,All rights reserved 版权所有
                © 您的网站名称 未经许可 严禁复制</p>
        </div>
    </div>
</div>

</body>

</html>